<template>
  <div>
    <generate-field-form-parse-array-object v-if="config.form === 'parse-array-object'" :config="config"></generate-field-form-parse-array-object>
    <el-form-item v-else :label="config.label">
      <el-input v-if="config.form === 'input'" v-model="config.value" v-bind="config.params"></el-input>
      <el-input-number v-if="config.form === 'input-number'" v-model="config.value"
                       v-bind="config.params"></el-input-number>
      <el-switch v-if="config.form === 'switch'" v-model="config.value" v-bind="config.params"></el-switch>
      <el-slider v-if="config.form === 'slider'" v-model="config.value" v-bind="config.params"></el-slider>
      <el-color-picker v-if="config.form === 'color-picker'" v-model="config.value"
                       v-bind="config.params"></el-color-picker>
      <el-rate v-if="config.form === 'rate'" v-model="config.value" v-bind="config.params"></el-rate>
      <el-date-picker v-if="config.form === 'date-picker'" v-model="config.value" v-bind="config.params"></el-date-picker>
      <el-select v-if="config.form === 'date-picker'" v-model="config.value" v-bind="config.params">
        <el-option v-for="(item,index) in config.options"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
        ></el-option>
      </el-select>
      <el-radio-group v-if="config.form === 'radio'" v-model="config.value" v-bind="config.params">
        <el-radio v-for="(item,index) in config.options"
                  :key="index"
                  :label="item.value">{{item.label}}</el-radio>
      </el-radio-group>
      <el-checkbox-group v-if="config.form === 'checkbox'" v-model="config.value" v-bind="config.params">
        <el-checkbox v-for="(item,index) in config.options"
                     :key="index"
                     :label="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

  </div>
</template>

<script>

export default {
  name: "generate-field-form-item",
  props: {
    config: {
      type: Object
    }
  }
}
</script>

<style scoped>

</style>
